<template>
  <div
    class="detail-info-list"
    v-show="isShowDetailList"
    ref="detailList"
    :style="{ 'max-height': tableHeight + 80 + 'px' }"
  >
    <div class="title">
      <div class="header">
        <div class="icon">
           <Collection style="width: 1em; height: 1em; margin-right: 0.3rem" />
        </div>
        <div class="text">
          {{ currentTab }}
        </div>
      </div>
      <div class="btns">
        <el-button
          circle
          type="plain"
          size="small"
          :icon="Close"
          class="close-btn"
          @click="handleCloseTabs"
        />
      </div>
    </div>
    <el-tabs
      v-model="activeName"
      type="card"
      class="demo-tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane label="房屋基本信息" name="房屋基本信息">
        <div
          class="tab-content"
          :style="{
            'max-height': tableHeight + 'px',
            'max-width': tableWeight + 'px',
            'min-height': tableHeight + 'px',
            'min-width': tableWeight + 'px',
          }"
        >
          <el-descriptions class="desc" :column="2" size="small" border>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">隐患状态</div>
              </template>
              {{ getYhzt(yhInfo.pczt) ?? '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">{{ getTimeType(currentTab) }}时间</div>
              </template>
              {{ houseInfo.pcsj ?? '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">户主姓名</div>
              </template>
              {{ houseInfo.hzxm ?? '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">房屋编号</div>
              </template>
              {{ houseInfo.fwbh ?? '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">总居住人数(人)</div>
              </template>
              {{ houseInfo.jzrks ?? '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">租住人数(人)</div>
              </template>
              {{ houseInfo.zzrs ?? '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">房屋层数(层)</div>
              </template>
              {{ houseInfo.cs ?? '' }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">房间数量(个)</div>
              </template>
              {{ houseInfo.fjsl ?? '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">出租房间数量(个)</div>
              </template>
              {{ houseInfo.jzfjs ?? '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">房屋首层现有安全出口的数量(个)</div>
              </template>
              {{ houseInfo.jzscxyaqcksl ?? '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">房屋现有疏散楼梯的数量(个)</div>
              </template>
              {{ houseInfo.jzxyssltsl ?? '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">房屋首层面积(平方米)</div>
              </template>
              {{ houseInfo.jzscmj ?? '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">窗口防护网、广告牌、铁栅栏数量(个)</div>
              </template>
              {{ houseInfo.ckfhwggptzlsl ?? '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">本房屋居住人员的电动自行车数量(辆)</div>
              </template>
              {{ houseInfo.bdfwjzrydddzxcsl ?? '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">灭火器数量(个)</div>
              </template>
              {{ houseInfo.mhqsl ?? '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">防烟跳生面置数量(套)</div>
              </template>
              {{ houseInfo.fytsmz ?? '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">悬挂固定警示标牌数量(张)</div>
              </template>
              {{ houseInfo.xggdjsbp ?? '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">房屋简易喷头数量(个)</div>
              </template>
              {{ houseInfo.jzsyjyplmhxts }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">房屋烟感报警器数量(个)</div>
              </template>
              {{ houseInfo.jzszlwxdlgybjqs ?? '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  屋顶、围护结构、房间隔墙使用易燃可燃夹芯彩钢板搭建
                </div>
              </template>
              {{ houseInfo.wdwhjgfjgqsyyrkrgbdj ?? '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">疏散通道使用易燃可燃材料装修</div>
              </template>
              {{ getSstdsyyrkrclzx(houseInfo.sstdsyyrkrclzx) ?? '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  供人员疏散的场院、内院、天井设置不利于烟气扩散的顶棚、雨棚等
                </div>
              </template>
              {{ houseInfo.gryssdcsszblyyqksddp ?? '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">除居住外是否存在其他经营业态</div>
              </template>
              {{ transfromFiledFn(houseInfo.cjzwqtjyyt) ?? '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">建设人员疏散通道1</div>
              </template>
              {{ houseInfo.jsrysstd ?? '' }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-tab-pane>
      <el-tab-pane label="隐患信息" name="隐患信息">
        <div
          class="tab-content"
          :style="{
            'max-height': tableHeight + 'px',
            'max-width': tableWeight + 'px',
            'min-height': tableHeight + 'px',
            'min-width': tableWeight + 'px',
          }"
        >
          <el-descriptions class="desc1" :column="1" size="small" border>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  电动自行车、电动平衡车及其蓄电池在室内及安全出口处停放、充电
                </div>
              </template>
              <el-tag type="success">{{
                transfromFiledFn(yhInfo.useElectricBicycle)
              }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  在公共区域、租住房间内、地下室使用瓶装液化石油气
                </div>
              </template>
              <el-tag type="success">{{
                transfromFiledFn(yhInfo.useBottledLiquefiedGas)
              }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  疏散走道、楼梯间、安全出口处堆放物品影响人员疏散
                </div>
              </template>
              <el-tag type="success">{{
                transfromFiledFn(yhInfo.useStackedItems)
              }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">私拉乱接电线</div>
              </template>
              <el-tag type="success">{{
                transfromFiledFn(yhInfo.slljdx)
              }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">灭火器未保持完好有效</div>
              </template>
              <el-tag type="success">{{
                transfromFiledFn(yhInfo.mhqwbcwhyx)
              }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">简易喷淋灭火系统未保持完好有效</div>
              </template>
              <el-tag type="success">{{
                transfromFiledFn(yhInfo.jyplmhxtwbcwhyx)
              }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">烟感报警未保持完好有效</div>
              </template>
              <el-tag type="success">{{
                transfromFiledFn(yhInfo.ygbjwfwhyx)
              }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">户主签字</div>
              </template>
              <img
                :src="yhInfo.sign"
                style="width: 200px; height: 100px"
                alt=""
              />
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="整改信息" name="整改信息">
        <div
          class="tab-content"
          :style="{
            'max-height': tableHeight + 'px',
            'max-width': tableWeight + 'px',
            'min-height': tableHeight + 'px',
            'min-width': tableWeight + 'px',
          }"
        >
          <div
            class="yh-list"
            :style="{ 'max-height': tableHeight + 40 + 'px' }"
          >
            <div class="list-item">
              <div>1.房屋编号：</div>
              <div>{{ zcData.fwbh }}</div>
            </div>
            <div class="list-item-img">
              <div>2.签字信息：</div>
              <div>
                <img :src="zcData.sign" alt="" srcset="" />
              </div>
            </div>
            <div class="list-item-img">
              <div>3.烟火报警器：</div>
              <div>
                <img :src="zcData.useStackedItemsPhoto" alt="" srcset="" />
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted, nextTick } from 'vue'
import { Close } from '@element-plus/icons-vue'
const emit = defineEmits()
// Props
const props = defineProps({
  isShowDetailList: {
    type: Boolean,
    default: false,
  },
  currentTab: {
    type: String,
    default: '隐患记录',
  },
  currentName: {
    type: String,
    default: '隐患记录',
  },
  houseInfo: {
    type: Object,
    default: () => ({}),
  },
  yhInfo: {
    type: Object,
    default: () => ({}),
  },
})
// Reactive state
const tableHeight = ref(360) // 默认值为360px
const tableWeight = ref(290) // 默认值为360px
const detailList = ref(null)
// 关闭按钮
const handleCloseTabs = () => {
  emit('openDetailInfo')
  activeName.value = '房屋基本信息'
}
const activeName = ref('房屋基本信息')

// 隐患
watch(
  () => props.currentTab,
  (newData) => {
    if (newData) {
      // currentTab.value = newData
      console.log('@当前tab', newData)
    }
  },
  { immediate: true } // 在组件初始化时就进行一次赋值
)
// 隐患
watch(
  () => props.houseInfo,
  (newData) => {
    if (newData) {
      // currentTab.value = newData ckfhwggptzlsl
    }
  },
  { immediate: true } // 在组件初始化时就进行一次赋值
)
// 动态获取 列表高度
watch(
  () => props.isShowDetailList,
  (newVal) => {
    if (newVal) {
      nextTick(() => {
        if (detailList.value) {
          let allHeight = document.querySelector('.map-container').clientHeight
          let allWidth = document.querySelector('.map-container').clientWidth
          tableHeight.value = allHeight * 0.7
          tableWeight.value = allWidth * 0.4
        }
      })
    }
  }
)

onMounted(() => {
  if (props.isShowSearchList) {
    // DOM 渲染完成后获取高度
    nextTick(() => {
      if (searchList.value) {
        let allHeight = document.querySelector('.map-container').clientHeight
        let allWidth = document.querySelector('.map-container').clientWidth
        tableHeight.value = allHeight * 0.7
        tableWeight.value = allWidth * 0.4
      }
    })
  }
})

const handleClick = (tab, event) => {
  console.log(tab, event)
}
// 翻译文字
const transfromFiledFn = (item) => {
  if (item === 1) {
    return '是'
  } else if (item === 0) {
    return '否'
  } else if (item === 2) {
    return '不涉及'
  } else {
    return item
  }
}
const getTimeType = (item) => {
  if (item === '自查记录') {
    return '自查'
  } else if (item === '检查记录') {
    return '检查'
  } else {
    return '核验'
  }
}
const getYhzt = (item) => {
  if (item === 1) {
    return '无隐患'
  } else if (item === 2) {
    return '有隐患'
  } else {
    return item
  }
}
const getSstdsyyrkrclzx = (item) => {
  if (item === 1) {
    return '是'
  } else if (item === 0) {
    return '否'
  } else {
    return item
  }
}
defineExpose({})
</script>

<style lang="scss" scoped>
.detail-info-list {
  position: absolute;
  top: 5rem;
  right: 1rem;
  padding: 1rem;
  z-index: 999;
  width: auto;
  // height: 400px;
  // border: 1px solid red;
  background-color: rgba(91, 93, 179, 1); /* 保留父容器背景，但不影响子元素 */
  .title {
    // line-height: 2.5rem;
    // height: 2.5rem;
    border-bottom: 1px solid #fff;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header {
      display: flex;
      font-size: 2rem;
      font-weight: 700;
      .icon{
      }
      .text{
        line-height: 2rem;
      }
    }
    .btns {
      margin-bottom: 1.5rem;
    }
  }
}
.demo-tabs {
  ::v-deep .el-tabs__header {
    margin: 0;
    color: #fff; /* 设置标题字体颜色为白色 */
  }

  ::v-deep .el-tabs__nav-wrap {
    .el-tabs__nav-scroll {
      .el-tabs__nav {
        .el-tabs__item {
          color: #fff; /* 设置所有 tab 字体为白色 */
        }
        /* 保持选中项的高亮 */
        .el-tabs__item.is-active {
          color: #409eff; /* 设置选中项的颜色，通常是蓝色 */
        }
      }
    }
  }
  ::v-deep .el-tabs__content {
    .tab-content {
      // height: 300px;
      overflow: auto;
      /********* 按钮滚动条 ************/
      &::-webkit-scrollbar {
        width: 10px; /*对垂直流动条有效*/
        height: 10px; /*对水平流动条有效*/
        background-color: rgba(255, 255, 255, 0.6); // 滚动条背景色
      }

      // ::-webkit-scrollbar-track —— 轨道的 颜色、内阴影、圆角
      &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: #ededed;
      }

      // ::-webkit-scrollbar-thumb —— 滑块的 颜色、内阴影、圆角
      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #3fc8f8;
        background: rgb(23, 218, 255);
      }

      // ::-webkit-scrollbar-button —— 两端按钮样式，默认display: none;
      &::-webkit-scrollbar-button {
        background-color: #3fc8f8;
        background: rgb(23, 218, 255);
        height: 11px;
        width: 11px;
        cursor: pointer;
        // display: none;
      }

      // ::-webkit-scrollbar-corner —— 右下角汇合处样式，默认display: none;
      &::-webkit-scrollbar-corner {
        background: rgba(255, 255, 255, 0.6);
        // display: none;
      }
    }
  }
}
.yh-list {
  .list-item {
    display: flex;
    height: 6rem;
    line-height: 6rem;
    border-bottom: 1px solid #fff;
  }
  .list-item-img {
    display: flex;
    height: 6rem;
    line-height: 6rem;
    img {
      width: 6rem;
      height: 6rem;
    }
    border-bottom: 1px solid #fff;
  }
}
.desc {
  ::v-deep .el-descriptions__body {
    background-color: transparent;
  }
  ::v-deep .el-descriptions__cell {
  }
  ::v-deep .el-descriptions__label {
    width: 260px;
    background-color: rgba(91, 93, 179, 1) !important;
    color: #fff !important;
  }

  ::v-deep .el-descriptions__content {
    width: 200px;
    color: #fff !important;
  }
}
.desc1 {
  ::v-deep .el-descriptions__body {
    background-color: transparent;
  }
  ::v-deep .el-descriptions__cell {
  }
  ::v-deep .el-descriptions__label {
    width: 50%;
    background-color: rgba(91, 93, 179, 1) !important;
    color: #fff !important;
  }

  ::v-deep .el-descriptions__content {
    width: 50%;
    color: #fff !important;
  }
}
</style>
